<template>
  <div class="newsBank">
    <div class="newsBankTitle"><p>存款专区</p></div>
    <div class="newsBankSection">
      <div class="newsBankSec">
        <Select v-model="model1" style="width:200px">
          <Option v-for="item in silverListData" :value="item.id" :key="item.id">{{item.name}}</Option>
        </Select>
        <div class="secBack">
          <router-link :to="{name: 'topUp', query: {id: 4}}">
            <span><Icon type="ios-arrow-left"></Icon></span>返回
          </router-link>
        </div>
      </div>
    </div>
    <!--选择支付通道-->
    <div class="chooseBank displayFlex">
      <div class="chooseLeft">
        <article class="chooseArt">
          <section>步骤一</section>
          <figure></figure>
        </article>
      </div>
      <div class="chooseRight">
        <aside>请选择银行：</aside>
        <article class="chooseArticle">
          <section v-for="(card,index) in cardList" @click="cardListEvent(index, card)"
                   :class="{'cardSelect': parseInt(card.id) === cardListId}">
            <div class="chooseSection">
              <p>
                <Radio v-model="card.single"></Radio>
              </p>
              <p><img :src="card.icon"/></p>
              <p>{{card.name}}</p>
            </div>
          </section>
        </article>
      </div>
    </div>
    <!--请用存款至下方银行用户-->
    <!--二维码支付-->
    <div class="chooseBank displayFlex" v-if="!payTrue.line || payTrue.card">
      <div class="chooseLeft">
        <article class="chooseArt">
          <section>步骤二</section>
          <figure></figure>
        </article>
      </div>
      <div class="chooseRight">
        <aside>请存款至下方银行用户：</aside>
        <article class="cardAccoutEd" v-if="bindingCard">
          <aside class="displayFlex"><img :src="bindingCard.icon" alt=""><span>{{bindingCard.name}}</span></aside>
          <section>
            <p
                v-clipboard:copy="bindingCard.cardNo"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError">
              <span>账号代码: <strong>{{bindingCard.cardNo}}</strong></span>
            </p>
            <p class="name"
               v-clipboard:copy="bindingCard.userName"
               v-clipboard:success="onCopy"
               v-clipboard:error="onError">银行用户名：<strong>{{bindingCard.userName}}</strong></p>
          </section>
        </article>
        <div class="rwmImgWx" v-if="!payTrue.line && !payTrue.card">
          <img src="../../../assets/images/personal/rwmImg.png" alt="">
          <div class="rwmMaster"><img :src="bindingCard.qrcode" alt=""></div>
        </div>
      </div>
    </div>
    <!--请填写存款金额-->
    <div class="chooseBank displayFlex">
      <div class="chooseLeft">
        <article class="chooseArt">
          <section>步骤<span v-if="payTrue.line">二</span><span v-if="!payTrue.line">三</span></section>
          <figure></figure>
        </article>
      </div>
      <div class="chooseRight">
        <aside>请填写存款金额：</aside>
        <!--网银支付-->
        <div class="wyPay" v-if="payTrue.card">
          <div class="fillInCard">
            <ul>
              <li>
                <p>存款金额：</p>
                <p><input type="text" v-model="fromValue.amount" placeholder="请输入存款金额"></p>
              </li>
              <li>
                <p>存款人姓名：</p>
                <p><input type="text" v-model="fromValue.name" placeholder="请输入存款人姓名"></p>
              </li>
            </ul>
            <div class="fillInBtn">
              <a href="javascript:void(0)" @click="submissionEvent">确定存款</a>
            </div>
          </div>
          <div class="fillInText">
            <p>温馨提示：</p>
            <p>单笔储值最低<span>CNY{{bindingCard.pcMinAmount}}</span>，最高为<span>CNY{{bindingCard.pcMaxAmount}}</span>，并须视各家银行转款上限而定0
            </p>
            <p>先查看要入款的银行账号信息，然后通过网上银行、ATM、柜台或手机银行进行转账，转账成功后再如实提交转账信息，财务专员查收到信息后会及时添加您的款项。</p>
            <p>请尽可能选择同行办理转账，可快速到账。</p>
            <p>存款完成后，保留单据以利核对并确保您的权益。</p>
            <p>建议您使用Internet Explorer 9以上、360浏览器、Firefox或Google Chrome等浏览器浏览。</p>
            <p>如出现充值失败或充值后未到账等情况，请联系在线客服获取帮助。<a :href="_Api.customerLink" target="_blank">点击联系在线客服</a></p>
          </div>
        </div>
        <!--微信支付 支付宝支付-->
        <div class="wxPay" v-if="payTrue.pay">
          <div class="fillInCard">
            <ul>
              <li>
                <p>存款账号：</p>
                <p>{{userMessageName}}</p>
              </li>
              <li>
                <p>存款金额：</p>
                <p><input type="text" v-model="fromValue.amount" placeholder="请输入存款金额"></p>
              </li>
            </ul>
            <div class="fillInBtn">
              <a href="javascript:void(0)" @click="submissionEvent">确定存款</a>
            </div>
          </div>
          <div class="fillInText">
            <p>温馨提示：</p>
            <p>单笔储值最低<span>CNY{{bindingCard.pcMinAmount}}</span>，最高为<span>CNY{{bindingCard.pcMaxAmount}}</span>，如存款高于上限请分多笔支付。
            </p>
            <p>支付成功后，请等待几秒钟，提示<span>[支付成功]</span>按确认键后再关闭支付窗口。</p>
            <p>建议您使用Internet Explorer 9以上、360浏览器、Firefox或Google Chrome等浏览器浏览。</p>
            <p>如出现充值失败或充值后未到账等情况，请联系在线客服获取帮助。<a :href="_Api.customerLink" target="_blank">点击联系在线客服</a></p>
          </div>
        </div>
      </div>
    </div>
    <!--弹出框-->
    <div class="cardPopup" v-show="properTrue.card || properTrue.pay">
      <div class="cardPopupMain">
        <!--微信支付-->
        <div class="popupCardPay" v-show="properTrue.pay">
          <aside class="popupAside">
            <p @click="popCloseEvent">关闭</p>等待支付
          </aside>
          <section class="popupSection">
            <div class="clearFiex">
              <div class="popupCardText floatLeft">
                <aside>正在与第三方对接，请尽快完成支付</aside>
                <p>1、成功付款后，将会自动到账，并消息提醒</p>
                <p>2、长时间无反应，请 <a :href="_Api.customerLink" target="_blank">联系客服</a></p>
              </div>
              <div class="ewmInfoBox floatRight" v-show="currentPayType=='qcord'&&payUrl">
                <p class="money">支付金额： <span>¥{{fromValue.amount}}</span>元</p>
                <div class="ewmMessBox">
                  <div class="ewmBox relative">
                    <canvas class="canvas"></canvas>
                    <div class="titleInfo"><p>{{payChanelName}}扫一扫</p></div>
                  </div>
                </div>
              </div>
            </div>

          </section>
          <div class="popupBtn">
            <p><a href="javascript:void(0)" @click="popCloseEvent">重新填写</a></p>
            <p><a href="javascript:void(0)" @click="popCloseEvent">付款完成</a></p>
          </div>
        </div>
        <!--网银支付-->
        <div class="popupCardTrue" v-if="properTrue.card">
          <aside class="popupAside">
            <p @click="popCloseEvent">关闭</p>确认提交
          </aside>
          <div class="popupAmountEd">
            <ul>
              <li class="displayFlex">
                <p>存款金额：</p>
                <p><span>{{fromValue.amount}}</span></p>
              </li>
              <li class="displayFlex">
                <p>手续费/返手续费：</p>
                <p class="red"><span>0.00</span></p>
              </li>
              <li class="displayFlex">
                <p>实际到账：</p>
                <p class="red"><span>{{fromValue.amount}}</span></p>
              </li>
            </ul>
          </div>
          <div class="popupBackText">
            <p>系统审核通过后，您的钱包余额将增加相应的“实际到账”金额</p>
          </div>
          <div class="popupBtn">
            <p><a href="javascript:void(0)" @click="popCloseEvent">取消提交</a></p>
            <p><a href="javascript:void(0)" @click="popCloseEvent(1)">已存款，确认提交</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import './newsBank.scss';
  import {mapState} from 'vuex';
  export default {
    data() {
      return {
        silverListData: [],
        model1: 1,
        radioFalse:false,
        payUrl: '',
        cardList: [{
          skipType:'qcord',
          isOnline:1,
          isLock:1,
          single:false,
          name:'暂无支付通道'
        }],//所有支付通道数据
        cardListId: 0,//选中的支付通道id
        payChanelName:"",//支付通道名
        currentPayType:"",//当前支付类型 bank/url/qcode
        fromValue: {
          amount: '',//充值金额
          name: ''//充值用户
        },
        bindingCard: {},
        properTrue: {
          card: false, // 银行卡线下弹出框
          pay: false // 支付宝弹出框
        },
        payTrue: {
          card: false, // 银行卡转账
          pay: false, // 支付宝、微信
          line: false, // false 线下 true 线上
        },
        chains: false,
        userMessageName: ''
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.mutations.userInformation, //登录状态
      })
    },
    activated() {
      this.initData();
    },
    methods: {
      initData() {
        let that = this;
        that.payCloseStatus();
        that.initUserInfo();
        // 充值方式
        that._Util.post(that, that._Api.POST_ALL_PAYMENT_LIST, {client: 'pc'}, (data) => {
          that.silverListData = data.paymentList||[];
          if(that.silverListData.length>0){
            let payId = that.$route.query.payId;
            that.modePayEvent(that.silverListData, payId);
          }
        });
        that.model1 = parseInt(that.$route.query.payId) || 1;
      },
      //生成二维码
      creatQrcode(path) {
        if(!path) return;
        this._QRCode.toCanvas($(".canvas").eq(0)[0], path, function (error) {
          if (error) console.error(error);
        });
      },
      modePayEvent(arr, id) {
        //找到支付方式
        let that = this;
        arr.forEach((v, i) => {
          if (parseInt(v.id) === parseInt(id)) {
            let cardListData = v.paymentItemList||[];
            that.payChanelName = v.name||'';
            that.cardList = cardListData.length>0?v.paymentItemList:[{
              skipType:'qcord',
              isOnline:1,
              isLock:1,
              single:false,
              name:'暂无支付通道'
            }];
            that.cardList.forEach((w) => {
              if (w.skipType === 'bank') {
                that.payTrue.card = true;
              } else {
                that.payTrue.pay = true;
              }
              if (w.isOnline === 0) {
                that.payTrue.line = false;
              } else {
                that.payTrue.line = true;
              }
            });
            setTimeout(function () {
              that.cardListEvent(0, that.cardList[0]);
            }, 500);
            if(cardListData.length>0){

            }
          }
        });
      },
      status() {
        let that = this;
        that.cardList.forEach((v) => {
          v.single = false;
        });
      },
      initUserInfo() {
        if (this.userInfo) {
          this.userMessageName = this.userInfo.memberInfo.username || '';
        }
      },
      //支付通道点击事件
      cardListEvent(index, cardData) {
        let that = this;
        that.clearSubData();
        if(that.cardList[0].isLock) {
          that.cardList[0].single = false;
          return false;
        }
        that.status();
        that.cardList[index].single = true;
        that.cardListId = cardData.id;
        that.currentPayType = cardData.skipType;
        that.bindingCard = cardData;
        if (cardData.isOnline === 0) {
          that.payTrue.line = false;
        } else {
          that.payTrue.line = true;
        }
      },
      inputValInit() {
        let that = this;
        that.fromValue.amount = '';
        that.fromValue.name = '';
      },
      popupCloseEvent() {
        let that = this;
        that.properTrue.card = false;
        that.properTrue.pay = false;
      },
      popCloseEvent(type) {
        let that = this;
        that.popupCloseEvent();
        that.inputValInit();
        if(type=='1'){
          that._Util.showAlert("充值申请已提交");
        }
      },
      payCloseStatus() {
        let that = this;
        that.payTrue.card = false;
        that.payTrue.pay = false;
        that.payTrue.line = false;
      },
      //清除提交数据
      clearSubData(){
        this.fromValue = {
          amount: '',
          name: ''
        };
        this.cardListId = '';
      },
      submissionEvent() {
        //提交数据
        let that = this;
        if(!that.cardListId){
          that._Util.showAlert('请选择支付通道');
          return false;
        }
        if (that.payTrue.card || that.payTrue.pay) {
          if (!that.fromValue.amount || (that.fromValue.amount < that.bindingCard.pcMinAmount || that.fromValue.amount > that.bindingCard.pcMaxAmount)) {
            that._Util.showAlert('金额输入有误');
            return false;
          }
        }
        if (that.payTrue.card) {
          if (!that.fromValue.name) {
            that._Util.showAlert('存款人输入有误');
            return false;
          }
        }
        let submission = {
          paymentId: that.bindingCard.id,
          paymentTable: that.bindingCard.paymentTable,
          amount: that.fromValue.amount,
          payerName: that.fromValue.name ? that.fromValue.name : that.userMessageName
        };
        if (that.chains) return;
        that.chains = true;
        that.popupCloseEvent();
        that._Util.post(that, that._Api.POST_RECHARGW_STEP1, submission, (data) => {
          that.chains = false;
          if(that.payTrue.line){
            if(!data.payUrl){
              that._Util.showAlert("通道维护中...");
              return;
            }
            that.creatQrcode(data.payUrl);
            //线上第三方支付跳转链接
            if (that.currentPayType == 'wap') {
              that.properTrue.pay = true;
              window.open(data.payUrl);
            }
            //线上第三方支付二维码
            if (that.currentPayType == 'qcord') {
              that.properTrue.pay = true;
              that.payUrl = data.payUrl||'';
              that.creatQrcode(data.payUrl);
            }
          }else{
            if (that.currentPayType == 'bank') {
              that.properTrue.card = true;
            }
            //线下二维码
            if (that.currentPayType == 'qcord') {
              that._Util.showAlert("充值申请已提交");
            }
          }
        }, (data) => {
          that.chains = false;
        }, 'post')
      },
      //复制卡号he用户名
      onCopy: function (e) {
        this._Util.showAlert('复制成功');
      },
      //复制出错
      onError: function (e) {
        this._Util.showAlert('复制失败');
      },
    },
    watch: {
      'fromValue.amount'() {
        this.fromValue.amount = this._Modulation.inputNumber(this.fromValue.amount);
      },
      'userInfo'() {
        this.initUserInfo();
      },
      'model1'() {
        let that = this;
        that.payCloseStatus();
        that.modePayEvent(that.silverListData, that.model1);
      }
    }
  }
</script>
